<template>
  <div>
    <van-nav-bar title="我的团队">
      <img
        src="~assets/image/arrow_left.png"
        width="20"
        height="20"
        slot="left"
        @click="leftClick"
        alt=""
      />
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="myspread">
        <h4>在"支付变革"时代</h4>
        <p>给消费者更多选择</p>
      </div>
      <div class="mysp">
        <div class="item1">
          <p>已邀请</p>
          <p>{{ all.directPush + all.betweenPush }}</p>
        </div>
        <div class="item1">
          <p>已实名</p>
          <p>{{ all.realName }}</p>
        </div>
        <div class="item1">
          <p>VIP</p>
          <p>{{ all.vip }}</p>
        </div>
      </div>

      <div
        v-if="infoflag"
        class="mysp-main"
        v-for="item in preadInfoList"
        :key="item.grade"
        @click="itemClick(item)"
      >
        <img :src="getImgUrl(item.grade)" width="50" height="50" alt="" />
        <div class="item">
          <p class="myGrade">{{ item.name }}</p>
          <p>
            直接推广 <span>{{ item.GradesonIds }}</span> 人，间接推广
            <span>{{ item.Gradepreuids }}</span> 人
          </p>
        </div>
        <img src="~assets/image/arr_rigth.png" width="9" height="15" alt="" />
      </div>
      <van-empty v-else>
        <img slot="image" src="../../assets/image/img_myspread_new.png" />
        <div slot="default">
          <p>还没有直推用户</p>
          <p>请前去立即推广哦</p>
        </div>
      </van-empty>
    </van-pull-refresh>
  </div>
</template>
<script>
import { querySubMemberStatus, queryMySpreadInfoApi } from "network/ApiServe";
export default {
  name: "MySpread",
  data() {
    return {
      isLoading: false,
      all: {},
      preadInfoList: [],
      preadInfoType: [
        { type: "0", name: "线上购买显示价格" },
        { type: "1", name: "线下客服显示价格" },
        { type: "2", name: "线上购买不显示价格" },
        { type: "3", name: "线下客服不显示价格" },
        { type: "4", name: "前端不展示产品" },
      ],
      imgurl: [
        { grade: 0, img: require("assets/image/icon_all_wdtg_0.png") },
        { grade: 1, img: require("assets/image/icon_all_wdtg_1.png") },
        { grade: 2, img: require("assets/image/icon_all_wdtg_2.png") },
        { grade: 3, img: require("assets/image/icon_all_wdtg_3.png") },
        { grade: 4, img: require("assets/image/icon_all_wdtg_4.png") },
        { grade: 5, img: require("assets/image/icon_all_wdtg_5.png") },
        { grade: 6, img: require("assets/image/icon_all_wdtg_6.png") },
        { grade: 7, img: require("assets/image/icon_all_wdtg_7.png") },
        { grade: 8, img: require("assets/image/icon_all_wdtg_8.png") },
        { grade: 9, img: require("assets/image/icon_all_wdtg_9.png") },
        { grade: 10, img: require("assets/image/icon_all_wdtg_10.png") },
      ],
    };
  },
  created() {
    this.userId = localStorage.getItem("userId");
    this.token = localStorage.getItem("token");
  },
  computed: {
    infoflag() {
      if (this.preadInfoList.length != 0) {
        return true;
      } else {
        return false;
      }
    },
  },
  mounted() {
    this.getSubMemberStatus();
    this.getMySpreadInfoApi();
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.getSubMemberStatus();
        this.getMySpreadInfoApi();
      }, 1000);
    },
    getImgUrl(grade) {
      if (this.imgurl[grade].grade == grade) {
        return this.imgurl[grade].img;
      }
    },
    leftClick() {
      this.$router.back(-1);
    },
    itemClick(item) {
      localStorage.setItem("mySpreadGrade", item.grade);
      this.$router.push({
        name: "MemberDetail",
        // params: {
        //   grade: item.grade,
        // },
      });
      // this.$router.push("/memberdetail");
    },
    getSubMemberStatus() {
      this.all = {};
      querySubMemberStatus(this.userId)
        .then((res) => {
          if (res.resp_code === "000000") {
            this.all = res.result.all;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getMySpreadInfoApi() {
      queryMySpreadInfoApi(this.token)
        .then((res) => {
          console.log("getMySpreadInfoApi", res);
          if ((res.resp_code = "000000")) {
            res.result.thirdLevelDistribution.filter((item) => {
              if (item.TrueFalseBuy != this.preadInfoType[4].type) {
                this.preadInfoList.push(item);
              }
            });
            console.log("this.preadInfoList", this.preadInfoList);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.myspread {
  height: 160px;
  background-color: #121212;
  background-image: url("~assets/image/icon_all_design8.png");
  background-size: 140px;
  background-repeat: no-repeat;
  background-position: 90% 20px;
}
.myspread h4 {
  padding-top: 50px;
  margin-left: 20px;
}
.myspread p {
  margin-top: 20px;
  margin-left: 20px;
  font-size: 16px;
}
.mysp {
  display: flex;
  height: 70px;

  justify-content: space-around;
}
.mysp .item1 {
  flex: 1;
  text-align: center;
}
.mysp .item1 p {
  font-size: 14px;
  margin-top: 10px;
}
.mysp-main {
  display: flex;
  background-color: #fff;
  margin-top: 1px;
  padding: 15px;
  align-items: center;
}
.item {
  flex: 1;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 12px;
}
.item .myGrade {
  margin-bottom: 10px;
}
p span {
  color: red;
}
.van-empty {
  margin-top: 35%;
  display: flex;
  justify-items: center;
  text-align: center;
  font-size: 16px;
  color: #444;
  line-height: 20px;
}
</style>
